<template>
  <div class="title-box">
    <span
      class="title-box-span"
      :class="titleIndex === index ? 'active' : ''"
      v-for="(item, index) in releaseTitle"
      :key="item"
      @click="tabClick({ item, index })"
    >
      {{ item }}
    </span>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      titleIndex: 0,
    }
  },
  computed: {
    ...mapState({
      releaseTitle: (state) => state.release.releaseTitle,
    }),
  },
  methods: {
    tabClick({ item, index }) {
      this.titleIndex = index
      this.$emit('onClick', { item, index })
    },
  },
}
</script>

<style lang="scss" scoped>
.title-box {
  padding: 5px;
  margin: 5px;
  .title-box-span {
    margin: 5px;
    padding: 5px;
    background: lightblue;
    border-radius: 4px;
    color: #fff;
    &.active {
      background: red;
      color: gold;
    }
  }
}
</style>
